---
sidebar_position: 5
title: React hooks - useQueue
sidebar_label: useQueue
---

# useQueue

<div class="api-link">
  <div class="api-link-title">useQueue</div>
  <div class="api-link-sub-title">

[Read the API Reference »](/api/React/Hook/useQueue.mdx)

  </div>
</div>

---

## Introduction

This hook controls the **dispatcher queues**. It uses the [`Dispatcher`](/documentation/02-core/dispatcher.mdx) to read
the actual value of the queue, which is based on the `queueKey` retrieved from the request passed as the first argument.

A prepared [`Request`](/documentation/02-core/request.mdx) is the minimum requirement for `useQueue`.

---

## Initialization

```tsx
const { requests, stopped, stop, start, pause } = useQueue(getUsers);
```

---

## How it works?

**`useQueue`** uses the request to read the Dispatcher queue value based on its `queueKey`. Events emitted by the
Dispatcher keep this hook up to date. This hook gives you the option to control every single request made in your
application and manipulate whole queues and single requests. It works best with the `one-by-one` dispatching mode, when
the `queued` option is set to true.

:::caution

Remember to make sure your request `queueKey` is static when you use this hook. Because it auto-generates keys, it may
return wrong values if your request uses params or query params. Providing a custom `queueKey` when the request is
created will avoid this problem.

:::

```tsx
const { requests, stopped, stop, start, pause } = useQueue(getUsers);

requests.forEach((req) => {
  req.stopRequest();
  req.startRequest();
});

stop();
pause();
start();
```

Read more about differences between `stop`, `pause` and `start` in the
[`Dispatcher`](/documentation/02-core/dispatcher.mdx) doc page.

---

## Options

Configuration options for this hook are provided as the second parameter.

```tsx
const { ... } = useQueue(request, options)
```

<!-- {@import React UseQueueOptionsType returns} -->

---

## Returns

Returned values from this hook.

```tsx
const values = useQueue(request);
```

{@import React useQueue returns}

#### Request interface

{@import React QueueRequest returns}
